
<template>
  <div>
    编号 <el-autocomplete
  popper-class="my-autocomplete"
  v-model="resourceName"
  :fetch-suggestions="querySearch"
  placeholder="商铺完整编号"
  @select="handleSelect">
  <i
    class="el-icon-edit el-input__icon"
    slot="suffix"
    @click="handleIconClick">
  </i>
  <template slot-scope="{ item }">
    <div class="name">{{ item.value }}</div>
  </template>
</el-autocomplete>
    客户姓名 <el-input v-model="feeUser" placeholder="请输入" style="width: 15%;"></el-input>
    状态 <el-select v-model="value1" placeholder="请选择">
    <el-option
      v-for="item in options1"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
    收费项目 <el-select v-model="value2" placeholder="请选择">
    <el-option
      v-for="item in options2"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select><br>
    付款方式 <el-select v-model="value3" placeholder="请选择">
    <el-option
      v-for="item in options3"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
    <el-button type="primary" @click="Select" icon="el-icon-search">查询</el-button>  
    <el-button type="primary" icon="el-icon-refresh-right" @click="chongzhi">重置</el-button>
    <div>
      <div>
    <el-button type="primary"  @click="yajinTableVisible=true">新增</el-button>
    <el-dialog title="新建" :visible.sync="yajinTableVisible">
         
         <el-form :model="yajinruleForm"  :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="客户类型" prop="resource">
    <el-radio-group v-model="yajinruleForm.resource">
      <el-radio label="商铺客户" @click="a=true,b=false" checked></el-radio>
      <el-radio label="非商铺客户" @click="a=false,b=true"></el-radio>
    </el-radio-group>
  </el-form-item>

     <el-form-item label="编号" prop="resourceName" v-show="a">
    <el-autocomplete
  popper-class="my-autocomplete"
  v-model="resourceName"
  :fetch-suggestions="querySearch"
  placeholder="商铺完整编号"
  @select="handleSelect" >
  <i
    class="el-icon-edit el-input__icon"
    slot="suffix"
    @click="handleIconClick">
  </i>
  
</el-autocomplete>
<el-button type="primary" @click="Selectfeename" icon="el-icon-search">搜索</el-button>
     </el-form-item>
     <el-form-item label="客户名称" prop="feeUser" >
       <el-input
     v-model="this.feeUser1"
     :disabled="true">
   </el-input>
     </el-form-item>
     <el-form-item label="收费项目" prop="feeItemName" required>
         <el-select v-model="yajinruleForm.feeItemName" placeholder="请选择">
         <el-option label="测试楼宇广告费" value="测试楼宇广告费"></el-option>
         <el-option label="广告费用" value="广告费用"></el-option>
         <el-option label="物业违章罚款" value="物业违章罚款"></el-option>
         <el-option label="装修违章罚款" value="装修违章罚款"></el-option>
         <el-option label="装修垃圾清运费" value="装修垃圾清运费"></el-option>
         <el-option label="场地占用费" value="场地占用费"></el-option>
       </el-select>
     </el-form-item>
     <el-form-item label="付款方式" prop="payType" required>
       <el-select v-model="yajinruleForm.payType" placeholder="请选择">
         <el-option label="现金" value="cash"></el-option>
         <el-option label="微信支付" value="weixin"></el-option>
         <el-option label="支付宝" value="aliPay"></el-option>
         <el-option label="刷卡" value="cardPay"></el-option>
         <el-option label="转账" value="transferPay"></el-option>
       </el-select>
     </el-form-item>
     <el-form-item label="收费金额" prop="amt" placeholder="请输入" required>
       <el-input v-model="yajinruleForm.amt"></el-input>
     </el-form-item>
     <el-form-item label="收费时间" required>
         <el-form-item prop="operateTime">
         <div class="block">
       <el-date-picker
         v-model="yajinruleForm.operateTime"
         type="date"
         value-format="yyyy-MM-dd HH:mm:ss"
         placeholder="选择日期">
       </el-date-picker>
     </div>
   </el-form-item>
     </el-form-item>
     
     <el-form-item>
       
       <el-button @click="yajinTableVisible=false">取消</el-button>
       <el-button type="primary" @click="yajinTableVisible=false,add()">确定</el-button>
     </el-form-item>
   </el-form>
       </el-dialog> 





    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" >
    <el-table-column type="index" label="序号">
    </el-table-column>
    <el-table-column prop="resourceName" label="编号" >
    </el-table-column>
    <el-table-column prop="feeUser" label="客户姓名">
    </el-table-column>
    <el-table-column prop="feeItemName" label="收费项目" show-overflow-tooltip width="150">
    </el-table-column>
    <el-table-column prop="payType" label="付款方式" show-overflow-tooltip>
    </el-table-column>
    <el-table-column prop="amt" label="收费金额" show-overflow-tooltip>
    </el-table-column>
    <el-table-column prop="operateUser" label="收款人" show-overflow-tooltip>
    </el-table-column>
    <el-table-column prop="operateTime" label="收款时间" show-overflow-tooltip width="150">
    </el-table-column>
    <el-table-column prop="state" label="状态" show-overflow-tooltip>
        <template slot-scope="s">
                        <el-tag type="success" v-show="s.row.state == 'paied'">已付款</el-tag>
                        <el-tag type="danger" v-show="s.row.state == 'refunded'">未付款</el-tag>
                    </template>
    </el-table-column>
    <el-table-column prop="remark" label="备注" show-overflow-tooltip>
    </el-table-column>
//退款
    <el-table-column  label="操作" show-overflow-tooltip width="300">
      
      <template slot-scope="scope">
        <el-button type="text" size="small" @click="xiangqinVisible = true">退款详情</el-button>
        <el-button type="text" size="small" @click="tuikuanVisible = true,tuikuan(scope.row)">退款</el-button>
        <el-dialog title="押金退款" :visible.sync="tuikuanVisible">      
         <el-form :model="tuikuanruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
     <el-form-item label="编号" prop="resourceName" required>
       <el-input
     v-model="tuikuanruleForm.resourceName"
     :disabled="true">
   </el-input>
     </el-form-item>
     <el-form-item label="客户姓名" prop="feeUser" required>
       <el-input
     v-model="tuikuanruleForm.feeUser"
     :disabled="true">
   </el-input>
     </el-form-item>
     <el-form-item label="收费项目" prop="feeItemName" required>
       <el-input
     v-model="tuikuanruleForm.feeItemName"
     :disabled="true">
   </el-input>
     </el-form-item>
   
     <el-form-item label="付款方式" prop="payType" required>
      <el-input
     v-model="tuikuanruleForm.payType"
     :disabled="true">
   </el-input>
     </el-form-item>
     <el-form-item label="收费金额" prop="amt" placeholder="请输入" required>
       <el-input v-model="tuikuanruleForm.amt" :disabled="true"></el-input>
     </el-form-item>
     <el-form-item label="收费时间" required>
         <el-form-item prop="operateTime">
         <div class="block">
       <el-date-picker
         v-model="tuikuanruleForm.operateTime"
         type="date"
         value-format="yyyy-MM-dd HH:mm:ss"
         placeholder="选择日期">
       </el-date-picker>
     </div>
   </el-form-item>
     </el-form-item>
     <el-form-item label="退款时间" required>
         <el-form-item prop="refundTime">
         <div class="block">
       <el-date-picker
         v-model="tuikuanruleForm.refundTime"
         type="date"
         value-format="yyyy-MM-dd HH:mm:ss"
         placeholder="选择日期">
       </el-date-picker>
     </div>
   </el-form-item>
     </el-form-item>
     <el-form-item label="退款方式" prop="returnpayType">
    <el-select v-model="tuikuanruleForm.returnpayType" placeholder="请选择">
      <el-option label="现金" value="cash"></el-option>
      <el-option label="微信支付" value="weixin"></el-option>
      <el-option label="支付宝" value="aliPay"></el-option>
      <el-option label="刷卡" value="cardPay"></el-option>
      <el-option label="转账" value="transferPay"></el-option>
    </el-select>
  </el-form-item>
     <el-form-item label="备注" prop="remark">
       <el-input
     v-model="tuikuanruleForm.remark"
     >
   </el-input>
     </el-form-item>
     <el-form-item>
       
       <el-button @click="tuikuanVisible=false">取消</el-button>
       <el-button type="primary" @click="submittuikuan">确定</el-button>
     </el-form-item>
   </el-form>
       </el-dialog>
            <el-button type="text" size="small" @click="huanlianVisible = true">打印</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="pagination-container">  
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="total" >
            </el-pagination>
</div>
        </div>
  
</div>
  </div>

</template>

<script>
 export default {
    data() {
      return {
        ruleForm: {
     
    },
        rules: { 
         
        },
        id:"",
        linshiid:"",
        tuikuanruleForm:{

        },
        a:true,b:false,
        xiangqinVisible:false,
        yajinTableVisible:false,
        restaurants: [],
        currentPage: 1,  //默认当前页
            pageSize: 5, //每页显示条数例表
            total: 0,//总条数
        options1: [{//状态
          value: 'paied',
          label: '已付款'
        }, {
          value: 'refunded',
          label: '退还'
        }],
        options2: [{//收费项目
          value: '测试装修押金',
          label: '测试装修押金'
        }, {
          value: '广告费用',
          label: '广告费用'
        }, {
          value: '场地占用费',
          label: '场地占用费'
        }, {
          value: '物业违章罚款',
          label: '物业违章罚款'
        }, {
          value: '场地占用费',
          label: '场地占用费'
        }, {
          value: '装修保证金',
          label: '装修保证金'
        }],
        options3: [{//付款方式
          value: 'cash',
          label: '现金'
        }, {
          value: 'weixin',
          label: '微信支付'
        }, {
          value: 'aliPay',
          label: '支付宝'
        }, {
          value: 'cardPay',
          label: '刷卡'
        }, {
          value: 'transferPay',
          label: '转账'
        }, {
          value: 'miniapp_weixin',
          label: '小程序微信支付'
        }],
        value1: '',//状态
        value2: '',//收费项目
        value3: '',//付款方式
        resourceName:'',//编号
        feeUser: '',//客户名字
        feeUser1:"",
        tableData:[],//
        yajinruleForm:{},
        tuikuanVisible:false,
      };
    },
    methods: {
      yajintuikuan(row){
          this.tuikuanruleForm=row;
        },
        handleSizeChange(val) {
            this.communityList(this.currentPage, val);
        },
        handleCurrentChange(val) {
            this.communityList(val, this.pageSize);
        },
        tuikuan(row){
  console.log(row);
  this.tuikuanruleForm=row;
  this.linshiid=row.id;
          },
        submittuikuan(){
          this.$http.get(
                "http://localhost:8083/charge/linshituikuanCharge", {
                  params: {id:this.linshiid
                  },
            }
            ).then((result) => {
                console.log(result.status);
                console.log(result.message);
                this.$http.get(
                "http://localhost:8083/linshi/Provisional",
                {
                    params: {
                        pageNum: this.pageNum,
                        pageSize: this.pageSize,
                    },
                }
            ).then((result) => {
                let $data = result.data;
                this.tableData = $data.data.list; //表格数据          
                this.currentPage = $data.data.pageNum; //当前页          
                this.pageSize = $data.data.pageSize; //每页显示条数          
                this.total = $data.data.total;

            }).catch((err) => {
                this.$message.error(err);
            });
            })
            .catch((err)=>{
                this.$message.error(err);
            });
            this.tuikuanVisible =false
          },
add(){
  this.$http.post(
                "http://localhost:8083/charge/linshiCharge", {
                resourceName:this.resourceName,
                feeUser:this.feeUser1,
                feeItemName:this.yajinruleForm.feeItemName,
                 payType:this.yajinruleForm.payType,
                 amt:this.yajinruleForm.amt,
                operateTime:this.yajinruleForm.operateTime,     
            }
            ).then((result) => {
                console.log(result.status);
                console.log(result.message);
                this.$http.get(
                "http://localhost:8083/linshi/Provisional",
                {
                    params: {
                        pageNum: this.pageNum,
                        pageSize: this.pageSize,
                    },
                }
            ).then((result) => {
                let $data = result.data;
                this.tableData = $data.data.list; //表格数据          
                this.currentPage = $data.data.pageNum; //当前页          
                this.pageSize = $data.data.pageSize; //每页显示条数          
                this.total = $data.data.total;

            }).catch((err) => {
                this.$message.error(err);
            });
            })
            .catch((err)=>{
                this.$message.error(err);
            });
            this.yajinTableVisible=false
          },

        Selectfeename(){
            this.$http.get(
                "http://localhost:8083/deposit/selectfeename", {
                params: {
                    resourceName:this.resourceName,
                },
            }
            ).then((result) => {
                console.log(result.status);
                console.log(result.message);
                let $data = result.data;
                this.feeUser1 = $data.data.list[0].feeUser;
              
            })
            .catch((err)=>{
                this.$message.error(err);
            });
        },
        Select(){
            this.$http.get(
                "http://localhost:8083/linshi/select", {
                params: {
                  resourceName:this.resourceName,
                    feeUser:this.feeUser,
                    state:this.value1,
                    feeItemName:this.value2,
                    payType:this.value3
                },
            }
            ).then((result) => {
                console.log(result.status);
                console.log(result.message);
                let $data = result.data;
                this.tableData = $data.data.list;
                this.currentPage = $data.data.pageNum; //当前页          
                this.pageSize = $data.data.pageSize; //每页显示条数          
                this.total = $data.data.total;
            })
            .catch((err)=>{
                this.$message.error(err);
            });
        },
        communityList(pageNum, pageSize) {
            this.$http.get(
                "http://localhost:8083/linshi/Provisional",
                {
                    params: {
                        pageNum: pageNum,
                        pageSize: pageSize,
                    },
                }
            ).then((result) => {
                let $data = result.data;
                this.tableData = $data.data.list; //表格数据          
                this.currentPage = $data.data.pageNum; //当前页          
                this.pageSize = $data.data.pageSize; //每页显示条数          
                this.total = $data.data.total;

            }).catch((err) => {
                this.$message.error(err);
            });
        },

 
        chongzhi(){
        this.value1= "";//状态
        this.value2= "";//收费项目
        this.value3= "";//付款方式
        this. resourceName="";//编号
        this.feeUser="";//客户名字
        },
      querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      loadAll() {
        return [
          { "value": "01-A-1-101"},
        ];
      },
      handleSelect(item) {
        this.state=item.value,
        console.log(item);
      },
      handleIconClick(ev) {
        console.log(ev);
      }
      
    },
    mounted() {
      this.restaurants = this.loadAll();
      this.communityList(this.currentPage, this.pageSize);
      
    }
  }
</script>

<style>
 .pagination-container {  
    display: flex;  
    justify-content: flex-end;  
  }  
</style>
